<div class="flex items-center gap-2 h-[2rem] text-sm truncate opacity-50">
  @if (unsaved()) {
    <span class="w-2 h-2 shrink-0 rounded-full cursor-pointer bg-green-500 shadow-md shadow-green-400"
      [matTooltip]=" 'PAC.Messages.UnsavedChanges' | translate: {Default: 'Unsaved changes'} "
      matTooltipPosition="above"
      (click)="save()"
    >
    </span>
  }
  @if (draftSavedDate()) {
    <span class="truncate">{{ 'PAC.Xpert.AutoSave' | translate: {Default: 'Auto save'} }} {{draftSavedDate()}}</span>
  }
  @if (latestPublishDate()) {
    <span class="flex items-center mx-1">·</span>{{ 'PAC.Xpert.Published' | translate: {Default: 'Published'} }} {{latestPublishDate()}}
  }
</div>

<div class="flex-1"></div>

<div class="flex flex-wrap items-center gap-2">

  <button type="button" class="studio-action-btn btn disabled:btn-disabled btn-secondary btn-medium shrink-0 mr-2"
    #mt1="cdkMenuTriggerFor"
    [cdkMenuTriggerFor]="diagramMenu"
    [cdkMenuTriggerData]="{trigger: mt1}"
  >
    <i class="ri-links-line text-lg"></i>
  </button>

  <button type="button" class="studio-action-btn btn disabled:btn-disabled btn-secondary btn-medium shrink-0 mr-2"
    #mt2="cdkMenuTriggerFor"
    [cdkMenuTriggerFor]="agentMenu"
    [cdkMenuTriggerData]="{trigger: mt2}"
  >
    <i class="ri-chat-settings-line text-lg mr-1"></i>
    {{ 'PAC.Xpert.AgentSettings' | translate: {Default: 'Agent Settings'} }}
  </button>

  <button type="button" class="studio-action-btn btn disabled:btn-disabled btn-secondary btn-medium p-2"
    [ngClass]="sidePanel() === 'variables' ? 'text-primary-500' : ''"
    (click)="toggleVariables()"
  >
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"
      class="w-4 h-4 text-components-button-secondary-text">
      <g id="Icon L">
        <g id="Vector">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.33463 3.33333C2.96643 3.33333 2.66796 3.63181 2.66796 4V10.6667C2.66796 11.0349 2.96643 11.3333 3.33463 11.3333H4.66796C5.03615 11.3333 5.33463 11.6318 5.33463 12V12.8225L7.65833 11.4283C7.76194 11.3662 7.8805 11.3333 8.00132 11.3333H12.0013C12.3695 11.3333 12.668 11.0349 12.668 10.6667C12.668 10.2985 12.9665 10 13.3347 10C13.7028 10 14.0013 10.2985 14.0013 10.6667C14.0013 11.7713 13.1058 12.6667 12.0013 12.6667H8.18598L5.01095 14.5717C4.805 14.6952 4.5485 14.6985 4.33949 14.5801C4.13049 14.4618 4.00129 14.2402 4.00129 14V12.6667H3.33463C2.23006 12.6667 1.33463 11.7713 1.33463 10.6667V4C1.33463 2.89543 2.23006 2 3.33463 2H6.66798C7.03617 2 7.33464 2.29848 7.33464 2.66667C7.33464 3.03486 7.03617 3.33333 6.66798 3.33333H3.33463Z" fill="currentColor"></path>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M8.74113 2.66667C8.74113 2.29848 9.03961 2 9.4078 2H10.331C10.9721 2 11.5177 2.43571 11.6859 3.04075L11.933 3.93004L12.8986 2.77189C13.3045 2.28508 13.9018 2 14.536 2H14.5954C14.9636 2 15.2621 2.29848 15.2621 2.66667C15.2621 3.03486 14.9636 3.33333 14.5954 3.33333H14.536C14.3048 3.33333 14.08 3.43702 13.9227 3.6257L12.367 5.49165L12.8609 7.2689C12.8746 7.31803 12.9105 7.33333 12.9312 7.33333H13.8543C14.2225 7.33333 14.521 7.63181 14.521 8C14.521 8.36819 14.2225 8.66667 13.8543 8.66667H12.9312C12.29 8.66667 11.7444 8.23095 11.5763 7.62591L11.3291 6.73654L10.3634 7.89478C9.95758 8.38159 9.36022 8.66667 8.72604 8.66667H8.66666C8.29847 8.66667 7.99999 8.36819 7.99999 8C7.99999 7.63181 8.29847 7.33333 8.66666 7.33333H8.72604C8.95723 7.33333 9.18204 7.22965 9.33935 7.04096L10.8951 5.17493L10.4012 3.39777C10.3876 3.34863 10.3516 3.33333 10.331 3.33333H9.4078C9.03961 3.33333 8.74113 3.03486 8.74113 2.66667Z" fill="currentColor"></path>
        </g>
      </g>
    </svg>
  </button>

  <button type="button" class="studio-action-btn btn disabled:btn-disabled btn-secondary btn-medium p-2"
    [ngmTooltip]="envInDevelopment"
    [hideDelay]="100"
  >
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="w-4 h-4 text-components-button-secondary-text"
    >
      <g id="env">
        <g id="Vector">
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M1.33325 3.33325C1.33325 2.22868 2.22868 1.33325 3.33325 1.33325H12.6666C13.7712 1.33325 14.6666 2.22869 14.6666 3.33325V3.66659C14.6666 4.03478 14.3681 4.33325 13.9999 4.33325C13.6317 4.33325 13.3333 4.03478 13.3333 3.66659V3.33325C13.3333 2.96506 13.0348 2.66659 12.6666 2.66659H3.33325C2.96506 2.66659 2.66659 2.96506 2.66659 3.33325V3.66659C2.66659 4.03478 2.36811 4.33325 1.99992 4.33325C1.63173 4.33325 1.33325 4.03478 1.33325 3.66659V3.33325Z"
            fill="currentColor"
          ></path>
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M14.6666 12.6666C14.6666 13.7712 13.7712 14.6666 12.6666 14.6666L3.33325 14.6666C2.22866 14.6666 1.33325 13.7711 1.33325 12.6666L1.33325 12.3333C1.33325 11.9651 1.63173 11.6666 1.99992 11.6666C2.36811 11.6666 2.66659 11.9651 2.66659 12.3333V12.6666C2.66659 13.0348 2.96505 13.3333 3.33325 13.3333L12.6666 13.3333C13.0348 13.3333 13.3333 13.0348 13.3333 12.6666V12.3333C13.3333 11.9651 13.6317 11.6666 13.9999 11.6666C14.3681 11.6666 14.6666 11.9651 14.6666 12.3333V12.6666Z"
            fill="currentColor"
          ></path>
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M1.33325 5.99992C1.33325 5.63173 1.63173 5.33325 1.99992 5.33325H4.33325C4.70144 5.33325 4.99992 5.63173 4.99992 5.99992C4.99992 6.36811 4.70144 6.66658 4.33325 6.66658H2.66659V7.33325H3.99992C4.36811 7.33325 4.66659 7.63173 4.66659 7.99992C4.66659 8.36811 4.36811 8.66658 3.99992 8.66658H2.66659V9.33325H4.33325C4.70144 9.33325 4.99992 9.63173 4.99992 9.99992C4.99992 10.3681 4.70144 10.6666 4.33325 10.6666H1.99992C1.63173 10.6666 1.33325 10.3681 1.33325 9.99992V5.99992Z"
            fill="currentColor"
          ></path>
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M6.4734 5.36186C6.75457 5.27673 7.05833 5.38568 7.22129 5.63012L8.66659 7.79807V5.99992C8.66659 5.63173 8.96506 5.33325 9.33325 5.33325C9.70144 5.33325 9.99992 5.63173 9.99992 5.99992V9.99992C9.99992 10.2937 9.80761 10.5528 9.52644 10.638C9.24527 10.7231 8.94151 10.6142 8.77855 10.3697L7.33325 8.20177V9.99992C7.33325 10.3681 7.03478 10.6666 6.66659 10.6666C6.2984 10.6666 5.99992 10.3681 5.99992 9.99992V5.99992C5.99992 5.70614 6.19222 5.44699 6.4734 5.36186Z"
            fill="currentColor"
          ></path>
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M11.0768 5.38453C11.4167 5.24292 11.807 5.40364 11.9486 5.74351L12.9999 8.26658L14.0512 5.74351C14.1928 5.40364 14.5831 5.24292 14.923 5.38453C15.2629 5.52614 15.4236 5.91646 15.282 6.25633L13.6153 10.2563C13.5118 10.5048 13.2691 10.6666 12.9999 10.6666C12.7308 10.6666 12.488 10.5048 12.3845 10.2563L10.7179 6.25633C10.5763 5.91646 10.737 5.52614 11.0768 5.38453Z"
            fill="currentColor"
          ></path>
        </g>
      </g>
    </svg>
  </button>
  
  <div class="w-[1px] h-3.5 bg-gray-200"></div>
  
  <div
    class="flex items-center p-0.5 rounded-lg border-[0.5px] shadow-sm bg-components-card-bg"
  >
    <div
      class="studio-action-btn flex items-center px-2 py-1 rounded-md text-sm font-medium cursor-pointer"
      [ngClass]="sidePanel() === 'preview' ? 'bg-primary-50 text-primary-500' : ''"
      (click)="togglePreview()"
    >
      <svg
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        fill="currentColor"
        class="mr-1 w-5 h-5"
      >
        <path
          d="M8 18.3915V5.60846L18.2264 12L8 18.3915ZM6 3.80421V20.1957C6 20.9812 6.86395 21.46 7.53 21.0437L20.6432 12.848C21.2699 12.4563 21.2699 11.5436 20.6432 11.152L7.53 2.95621C6.86395 2.53993 6 3.01878 6 3.80421Z"
        ></path>
      </svg>
      {{ 'PAC.Xpert.Preview' | translate: {Default: 'Preview'} }}
    </div>
    <div class="mx-0.5 w-[1px] h-3.5 bg-divider-regular"></div>
    <div class="inline-block">
      <div class="studio-action-btn group flex items-center justify-center px-2 py-1 rounded-md cursor-pointer"
        [cdkMenuTriggerFor]="conversationsMenu"
      >
        <svg
          width="16"
          height="16"
          viewBox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="w-5 h-5"
        >
          <g id="Icon" clip-path="url(#clip0_635_10941)">
            <path
              id="Vector"
              d="M14.6334 8.66683C14.6552 8.44756 14.6663 8.22516 14.6663 8.00016C14.6663 4.31826 11.6816 1.3335 7.99967 1.3335C4.31778 1.3335 1.33301 4.31826 1.33301 8.00016C1.33301 11.6821 4.31778 14.6668 7.99967 14.6668C8.11145 14.6668 8.22258 14.6641 8.33301 14.6586C8.44487 14.6531 8.556 14.6449 8.66634 14.6339M7.99967 4.00016V8.00016L5.42265 9.25534M11.853 9.97346L14.4308 11.9068C14.6238 12.0515 14.7203 12.1239 14.7548 12.2126C14.785 12.2904 14.785 12.3766 14.7548 12.4543C14.7203 12.543 14.6238 12.6154 14.4308 12.7601L11.853 14.6935C11.5784 14.8995 11.441 15.0024 11.3261 15.0001C11.226 14.998 11.1322 14.9511 11.0706 14.8723C10.9997 14.7818 10.9997 14.6101 10.9997 14.2668V10.4001C10.9997 10.0568 10.9997 9.88516 11.0706 9.79463C11.1322 9.71585 11.226 9.66895 11.3261 9.66687C11.441 9.66448 11.5784 9.76747 11.853 9.97346Z"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            ></path>
          </g>
          <defs>
            <clipPath id="clip0_635_10941"><rect width="16" height="16" fill="white"></rect></clipPath>
          </defs>
        </svg>
      </div>
    </div>
    <div class="inline-block" >
      <div class="relative ml-0.5 flex items-center justify-center w-7 h-7 rounded-md">
        <div
          class="studio-action-btn group flex items-center justify-center w-full h-full rounded-md cursor-pointer"
          [ngmTooltip]="checklistInDevelopment"
          [hideDelay]="100"
        >
          <svg
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            fill="currentColor"
            class="w-5 h-5"
          >
            <path
              d="M8.00008 6V9H5.00008V6H8.00008ZM3.00008 4V11H10.0001V4H3.00008ZM13.0001 4H21.0001V6H13.0001V4ZM13.0001 11H21.0001V13H13.0001V11ZM13.0001 18H21.0001V20H13.0001V18ZM10.7072 16.2071L9.29297 14.7929L6.00008 18.0858L4.20718 16.2929L2.79297 17.7071L6.00008 20.9142L10.7072 16.2071Z"
            ></path>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <button type="button" class="studio-action-btn btn disabled:btn-disabled btn-secondary btn-medium text-components-button-secondary-text"
    (click)="toggleFeatures()">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="w-4 h-4 mr-1 text-components-button-secondary-text">
      <path d="M2.5 7C2.5 9.48528 4.51472 11.5 7 11.5C9.48528 11.5 11.5 9.48528 11.5 7C11.5 4.51472 9.48528 2.5 7 2.5C4.51472 2.5 2.5 4.51472 2.5 7ZM2.5 17C2.5 19.4853 4.51472 21.5 7 21.5C9.48528 21.5 11.5 19.4853 11.5 17C11.5 14.5147 9.48528 12.5 7 12.5C4.51472 12.5 2.5 14.5147 2.5 17ZM12.5 17C12.5 19.4853 14.5147 21.5 17 21.5C19.4853 21.5 21.5 19.4853 21.5 17C21.5 14.5147 19.4853 12.5 17 12.5C14.5147 12.5 12.5 14.5147 12.5 17ZM9.5 7C9.5 8.38071 8.38071 9.5 7 9.5C5.61929 9.5 4.5 8.38071 4.5 7C4.5 5.61929 5.61929 4.5 7 4.5C8.38071 4.5 9.5 5.61929 9.5 7ZM9.5 17C9.5 18.3807 8.38071 19.5 7 19.5C5.61929 19.5 4.5 18.3807 4.5 17C4.5 15.6193 5.61929 14.5 7 14.5C8.38071 14.5 9.5 15.6193 9.5 17ZM19.5 17C19.5 18.3807 18.3807 19.5 17 19.5C15.6193 19.5 14.5 18.3807 14.5 17C14.5 15.6193 15.6193 14.5 17 14.5C18.3807 14.5 19.5 15.6193 19.5 17ZM16 11V8H13V6H16V3H18V6H21V8H18V11H16Z"></path>
    </svg>{{ 'PAC.Xpert.Features' | translate: {Default: 'Features'} }}</button>

  <button class="no-underline group cursor-pointer relative shadow-2xl rounded-lg pl-4 pr-2 py-1 text-sm font-semibold leading-6 inline-block
    bg-primary-500 shadow-zinc-900 text-white"
    [disabled]="publishing()"
    [cdkMenuTriggerFor]="publishMenu"
  >
    <span>{{ 'PAC.Xpert.Publish' | translate: {Default: 'Publish'} }}</span>
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="inline-block w-4 h-4 ml-0.5">
      <path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path>
    </svg>
  </button>

</div>

<ng-template #publishMenu>
  <div class="cdk-menu__large w-80" cdkMenu @overlayAnimation1>
    <div class="flex flex-col px-2 pt-2 pb-4 text-gray-500">
      <div class="flex items-center h-6 font-medium uppercase mb-2 text-sm">
        {{ 'PAC.Xpert.LatestPublish' | translate: {Default: 'Latest Publish'} }}
      </div>
      <div cdkMenuItem class="flex justify-between items-center p-2"
        [cdkMenuTriggerFor]="versionMenu"
        [cdkMenuPosition]="[
          {
            originX: 'start',
            originY: 'top',
            overlayX: 'end',
            overlayY: 'top',
            offsetX: -12,
          }
        ]"  
      >
        <div class="flex items-center mt-[3px] mb-[3px] font-medium text-sm">
          @if (version()) {
            {{ 'PAC.KEY_WORDS.Version' | translate: {Default: 'Version'} }}: {{version()}}
            @if (latest()) {
              <div class="ml-1 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-lg">
                {{ 'PAC.Xpert.Latest' | translate: {Default: 'latest'} }}
              </div>
            }
          } @else {
            <span class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-orange-200 text-orange-700 rounded-lg">
              {{ 'PAC.Xpert.Draft' | translate: {Default: 'draft'} }}
            </span>
          }
        </div>
        @if (draft()) {
          <button type="button" class="self-center px-2 py-1 rounded-lg border border-token-border-medium text-sm transition duration-200
            text-primary-600 hover:bg-primary-50 active:bg-primary-100"
            (click)="resume()">
            {{ 'PAC.Xpert.Reset' | translate: {Default: 'Reset'} }}
          </button>
        }
      </div>

      <div cdkMenuItem class="p-2" (click)="export()">
        {{ 'PAC.Xpert.ExportDSLVersion' | translate: {Default: 'Export SDL (current version)'} }}
      </div>
    @if (draft()) {
      <div cdkMenuItem class="p-2" (click)="export(true)">
        {{ 'PAC.Xpert.ExportDSLDraft' | translate: {Default: 'Export SDL (draft)'} }}
      </div>
    }
      <div class="border-b border-solid border-divider-regular my-1"></div>

      <button class="mt-2 no-underline group cursor-pointer relative shadow-2xl rounded-lg p-2 text-base font-semibold leading-6 inline-block
        bg-primary-500 shadow-zinc-900 text-white
        disabled:bg-primary-100 disabled:shadow-none disabled:cursor-not-allowed"
        [disabled]="publishing() || !draft()"
        (click)="publish()"
      >
        <span>{{ 'PAC.Xpert.ReleaseNewVersion' | translate: {Default: 'Release as new version'} }}</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="inline-block w-4 h-4 ml-0.5">
          <path d="M21.7267 2.95694L16.2734 22.0432C16.1225 22.5716 15.7979 22.5956 15.5563 22.1126L11 13L1.9229 9.36919C1.41322 9.16532 1.41953 8.86022 1.95695 8.68108L21.0432 2.31901C21.5716 2.14285 21.8747 2.43866 21.7267 2.95694ZM19.0353 5.09647L6.81221 9.17085L12.4488 11.4255L15.4895 17.5068L19.0353 5.09647Z"></path>
        </svg>
      </button>

      <div class="mt-8 pt-2 border-t-[0.5px] border-t-black/5">
        <div class="group bg-gray-100 rounded-lg transition-colors cursor-pointer hover:bg-primary-50"
          (click)="publishToIntegration()"
        >
          <div class="flex justify-start items-center gap-2 px-2.5 py-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="26" height="17" viewBox="0 0 40 30" fill="none">
              <path fill="#00D6B9" d="m18.43 15.043.088-.087c.056-.057.117-.117.177-.174l.122-.117.36-.356.495-.481.42-.417.395-.39.412-.408.378-.373.53-.52c.099-.1.203-.196.307-.291.191-.174.39-.343.59-.508a13.271 13.271 0 0 1 1.414-.976c.283-.165.573-.321.868-.469a11.562 11.562 0 0 1 1.345-.55c.083-.027.165-.057.252-.083A20.808 20.808 0 0 0 22.648.947a1.904 1.904 0 0 0-1.48-.707H5.962a.286.286 0 0 0-.17.516 44.38 44.38 0 0 1 12.604 14.326l.035-.04z"/>
              <path fill="#3370FF" d="M12.386 28.427c7.853 0 14.695-4.334 18.261-10.738.126-.226.247-.451.364-.681a8.405 8.405 0 0 1-.837 1.31 9.404 9.404 0 0 1-.581.677 7.485 7.485 0 0 1-.911.815 6.551 6.551 0 0 1-.412.295 8.333 8.333 0 0 1-.555.343 7.887 7.887 0 0 1-1.754.72 7.58 7.58 0 0 1-.932.2c-.226.035-.46.06-.69.078-.243.017-.49.022-.738.022a8.826 8.826 0 0 1-.824-.052 9.901 9.901 0 0 1-.612-.087 7.81 7.81 0 0 1-.533-.113c-.096-.022-.187-.048-.282-.074a56.83 56.83 0 0 1-.781-.217c-.13-.039-.26-.073-.386-.112a22.1 22.1 0 0 1-.578-.178c-.156-.048-.312-.1-.468-.152-.148-.048-.3-.096-.447-.148l-.304-.104-.368-.13-.26-.095a18.462 18.462 0 0 1-.517-.191c-.1-.04-.2-.074-.3-.113l-.398-.156-.421-.17-.274-.112-.338-.14-.26-.107-.27-.118-.234-.104-.212-.095-.217-.1-.221-.104-.282-.13-.295-.14c-.104-.051-.209-.099-.313-.151l-.264-.13A43.902 43.902 0 0 1 .495 8.665.287.287 0 0 0 0 8.86l.009 13.42v1.089c0 .633.312 1.223.837 1.575a20.685 20.685 0 0 0 11.54 3.484z"/>
              <path fill="#133C9A" d="M35.463 9.511a12.003 12.003 0 0 0-8.88-.672c-.083.026-.166.052-.252.082a12.415 12.415 0 0 0-2.213 1.015c-.29.17-.569.352-.842.547a11.063 11.063 0 0 0-1.163.937c-.104.096-.203.191-.308.29l-.529.521-.377.374-.412.407-.395.39-.421.417-.49.486-.36.356-.122.117a6.7 6.7 0 0 1-.178.174l-.087.087-.134.125-.152.14a21.037 21.037 0 0 1-4.33 3.066l.282.13.222.105.217.1.212.095.234.104.27.117.26.109.338.139.273.112.421.17c.13.052.265.104.4.156.1.039.199.073.299.113.173.065.347.125.516.19l.26.096c.122.043.243.087.37.13l.303.104c.147.048.295.1.447.148.156.052.312.1.468.152.191.06.386.117.577.177a51.658 51.658 0 0 0 1.167.33c.096.026.187.048.282.074.178.043.356.078.534.113.204.034.408.065.612.086a8.286 8.286 0 0 0 2.252-.048c.312-.047.624-.116.932-.199a7.619 7.619 0 0 0 1.15-.416 7.835 7.835 0 0 0 .89-.473c.095-.057.181-.117.268-.174.139-.095.278-.19.412-.295.117-.087.23-.178.339-.273a8.34 8.34 0 0 0 1.15-1.22 9.294 9.294 0 0 0 .833-1.302l.203-.402 1.814-3.614.021-.044a11.865 11.865 0 0 1 2.417-3.449z"/>
            </svg>
            <div class="grow shrink basis-0 text-[13px] font-medium leading-[18px] truncate group-hover:text-primary-600">
              {{ 'PAC.Xpert.PublishToLarketc' | translate: {Default: 'Publish to Lark, etc.'} }}
            </div>
            <span class="shrink-0 px-1 border border-black/8 rounded-[5px] bg-white text-[10px] font-medium leading-[18px] text-gray-500">
              {{ 'PAC.Xpert.ConfigurationRequired' | translate: {Default: 'Configuration required'} }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #versionMenu>
  <div class="ngm-cdk-menu p-2" cdkMenu @overlayAnimation1>
    @for (item of versions(); track item.version) {
      <button class="ngm-cdk-menu-item px-2 py-1" cdkMenuItem
        [matTooltip]=" ('PAC.Xpert.PublishAt' | translate: {Default: 'Publish at'}) + ':' + (item.publishAt | date: 'short') "
        matTooltipPosition="before"
        [matTooltipDisabled]="!item.publishAt"
        (click)="selectVersion(item.id)">
        @if (item.version) {
          v{{item.version}}
        } @else {
          {{ 'PAC.Xpert.Draft' | translate: {Default: 'Draft'} }}
        }
        @if (item.version === version()) {
          <div class="ml-4 text-xs inline-flex items-center px-2 font-bold leading-sm uppercase text-primary-600 rounded-lg">
            current
          </div>
        }
      </button>
    }
  </div>
</ng-template>

<ng-template #conversationsMenu>
  <div class="cdk-menu__medium relative flex flex-col w-96 max-w-md !p-0" cdkMenu @overlayAnimation1>

    <button type="button" class="btn rounded-xl justify-center absolute top-2 right-2 w-8 h-8 z-20"
      (click)="refreshConv$.next()">
      <i class="ri-restart-line"></i>
    </button>

    @if (loadingConv()) {
      <ngm-spin class="absolute top-0 left-0 w-full h-full z-20" />
    }

    <div class="sticky top-0 bg-white flex items-center justify-between p-2 text-base font-semibold text-gray-900">
      <div class="grow">{{ 'PAC.Xpert.ChatHistory' | translate: {Default: 'Chat History'} }}</div>
    </div>

    <div class="w-full flex flex-col items-stretch p-2">
      @for (item of conversations$ | async; track item.id) {
        <button cdkMenuItem class="px-2 py-1 max-w-full flex flex-col justify-start items-start"
          [class.active]="conversationId() === item.id"
          [title]="item.title"
          (click)="openConversation(item)">
          <div class="text-start text-sm w-full max-w-full truncate">{{item.title}}</div>
          <div class="w-full text-end text-xs max-w-full text-text-tertiary">{{item.createdAt | date: 'medium'}}</div>
        </button>
      } @empty {
        <div class="w-32 h-8 flex justify-center items-center">
          {{ 'PAC.Xpert.NoChatHistory' | translate: {Default: 'No chat history'} }}
        </div>
      }
    </div>
  </div>
</ng-template>

<ng-template #agentMenu let-trigger="trigger">
  <div
    @overlayAnimation1
    class="w-[640px] flex flex-col h-full bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl"
  >
    <div class="shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-b-gray-100">
      <div class="flex flex-col text-base font-semibold text-gray-900">
        <div class="leading-6">{{ 'PAC.Xpert.AgentSettings' | translate: {Default: 'Agent Settings'} }}</div>
      </div>
      <div class="flex items-center">
        <div class="flex justify-center items-center w-6 h-6 cursor-pointer">
          <button
            type="button"
            class="pressable cursor-pointer text-text-secondary hover:bg-hover-bg rounded-full p-1"
            (click)="trigger.close()"
          >
            <i class="ri-close-circle-line w-6 h-6 block"></i>
          </button>
        </div>
      </div>
    </div>

    <div class="grow p-6 pt-5 border-b pb-[68px]">
      <div class="mb-4 flex justify-between items-center h-12 px-3 rounded-lg bg-gray-50">
        <div class="flex items-center">
          <i class="ri-git-merge-line text-xl text-fuchsia-600"></i>
          <div class="ml-3 mr-1 leading-6 text-sm font-semibold text-gray-800">
            {{ 'PAC.Xpert.MaxConcurrency' | translate: {Default: 'Max Concurrency'} }}
          </div>
          <i class="ri-question-line opacity-30 hover:opacity-100"
            [matTooltip]="'PAC.Xpert.MaxConcurrencyTip' | translate: {Default: 'Control the maximum number of parallel calls'}"
            matTooltipPosition="above"
          ></i>
        </div>
        <div class="flex items-center gap-6 w-[240px]">
          <mat-slider class="relative slider grow" disableRipple discrete
            min="1"
            max="10"
            step="1" >
            <input matSliderThumb [value]="maxConcurrency()" (dragEnd)="updateAgentConfig({maxConcurrency: $event.value})">
          </mat-slider>
          <input matInput
            min="1"
            max="10"
            step="1"
            class="block w-12 h-7 leading-7 rounded-lg border-0 pl-1 px-1.5 bg-gray-100 text-gray-900 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-primary-600"
            type="number"
            [ngModel]="maxConcurrency()"
            (ngModelChange)="updateAgentConfig({maxConcurrency: $event})"
          />
        </div>
      </div>

      <div class="mb-4 flex justify-between items-center h-12 px-3 rounded-lg bg-gray-50">
        <div class="flex-1 flex justify-start items-center">
          <i class="ri-infinity-line text-xl text-lime-600"></i>

          <div class="ml-3 mr-1 leading-6 text-sm font-semibold text-gray-800">
            {{ 'PAC.Xpert.RecursionLimit' | translate: {Default: 'Recursion Limit'} }}
          </div>

          <i class="ri-question-line opacity-30 hover:opacity-100"
            [matTooltip]="'PAC.Xpert.RecursionLimitTip' | translate: {Default: 'Limit the number of times a Agent can recurse'}"
            matTooltipPosition="above"
          ></i>
        </div>
        <div class="flex items-center gap-6 w-[240px]">
          <mat-slider class="relative slider grow" disableRipple discrete
            min="1"
            max="30"
            step="1" >
            <input matSliderThumb [value]="recursionLimit()" (dragEnd)="updateAgentConfig({recursionLimit: $event.value})">
          </mat-slider>
          <input matInput
            min="1"
            max="99"
            step="1"
            class="block w-12 h-7 leading-7 rounded-lg border-0 pl-1 px-1.5 bg-gray-100 text-gray-900 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-primary-600"
            type="number"
            [ngModel]="recursionLimit()"
            (ngModelChange)="updateAgentConfig({recursionLimit: $event})"
          />
        </div>
      </div>
    </div>
  </div>
</ng-template>


<ng-template #diagramMenu>
  <div cdkMenu @overlayAnimation1 class="min-w-[100px] min-h-[200px] max-w-xl max-h-[600px] p-4 relative bg-components-panel-bg-blur">
    @if (diagram$ | async; as diagram) {
      @if (diagram.image) {
        <img [src]="diagram.image" alt="Diagram Image">
      } @else {
        <div class="w-8 h-8 flex justify-center items-center mb-2 rounded-xl bg-slate-50 shadow-sm text-text-warning">
          <i class="ri-error-warning-line"></i>
        </div>
        <div class="text-sm text-text-warning">{{diagram.error}}</div>
      }
    } @else {
      <ngm-spin class="absolute top-0 left-0 w-full h-full" />
    }
    <button type="button" class="btn rounded-xl justify-center absolute top-2 right-2 w-8 h-8" (click)="refreshDiagram$.next()">
      <i class="ri-restart-line"></i>
    </button>
  </div>
</ng-template>

<ng-template #varInDevelopment>
  <pac-in-development @overlayAnimation1 feature="State variables" class="w-96" />
</ng-template>

<ng-template #envInDevelopment>
  <pac-in-development @overlayAnimation1 feature="Enviroments for variable and parameter" class="w-96" />
</ng-template>

<ng-template #checklistInDevelopment >
  <pac-in-development @overlayAnimation1 feature="Checklist" class="w-80" />
</ng-template>
